<template>
    <scroll-view 
        :scroll-y="true"
        class="ylk_cp">
        <view class="container">
            <view class="find">
                <u-search
                    shape="square"
                    @search="getData"
                    v-model="findData"
                    :show-action="false"
                    :height="80"
                    placeholder="请输入挂号单">
                </u-search>
                <u-loading
                    v-if="loading"
                    mode="flower">
                </u-loading>
            </view>
            <u-table>
                <u-tr>
                    <u-th>卡号</u-th>
                    <u-th>姓名</u-th>
                    <u-th>性别</u-th>
                    <u-th>年龄</u-th>
                </u-tr>
                <u-tr 
                    v-for="(item,index) in dataList" 
                    :key="index"
                    @click.native="findDetail(item)">
                    <u-td>{{item.kid}}</u-td>
                    <u-td>{{item.name}}</u-td>
                    <u-td>{{item.sex}}</u-td>
                    <u-td>{{item.age}}</u-td>
                </u-tr>
            </u-table>
            <view 
                class="bt_list" 
                @click="goPage">
                <u-icon name="plus" color="#ffffff"></u-icon>
            </view>
        </view>
        <YlkDetailCp
            ref="YlkDetailCp">
        </YlkDetailCp>
    </scroll-view>
</template>

<script>
//医疗卡组件
import YlkDetailCp from "@/components/mz_manage/YlkDetail.vue";
import {findCards} from "@/common/api";
export default {
    components:{
        YlkDetailCp,
    },
    props:{
        show:{  //当前页是否显示
            type:Boolean,
            default:false,
        },
        pageShow:{  //当前页面是否显示
            type:Boolean,
            default:false,
        },
    },
    data() {
        return {
            findData:"",  //根据挂号单查询挂单病人
            dataList:[],  //数据列表
            loading:false,  //查询加载状态
        }
    },
    watch:{
        show:{
            handler(newValue){
                //当该页可见并且数据为空时获取数据
                if(newValue && this.dataList.length==0) this.getData();
            },
            immediate:true,
        },
        pageShow:{
            handler(newValue){
                //当该页可见并且页面级可见时
                if(newValue && this.show) this.getData();
            },
            immediate:true,
        },
    },
    methods: {
        findDetail(item){  //查看医疗卡详情
            // this.$refs.YlkDetailCp.setShowState(true);
            // this.$refs.YlkDetailCp.setData(item);
        },
        goPage(){  //页面跳转
            uni.navigateTo({
                url: '/pages/mz_manage/views/addYlk',
            });
        },
        getData(){  //获取数据
            if(this.loading) return;  //如果正在加载则返回
            this.loading = true;
            findCards(
                {
                    kid:this.findData,
                },
            ).then(data=>{
                this.dataList = data;
            }).finally(()=>{
                this.loading = false;
            }).catch(msg=>{
                this.$refs.uToast.show({
                    title: msg,
                    position:'top',
                    type: 'error',
                });
            });
        },
    },
}
</script>
<style scoped lang="scss">
.ylk_cp{
    height: calc(100vh - 90rpx);
    .container{
        padding: 35rpx;
        box-sizing: border-box;
        .find{
            display: flex;
            align-items: center;
            margin-bottom: 35rpx;
        }
        .u-table{
            margin-bottom: 155rpx;
        }
        >.bt_list{
            position: fixed;
            bottom: 35rpx;
            right: 35rpx;
            width: 120rpx;
            height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: #253F73;
            font-size: 40rpx;
            color: #ffffff;
            background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
            box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
            z-index: 999;
        }
    }
}
</style>
